body{
  font-size: 70px;
}
.box{
  position: relative;
}
input[type="checkbox"].toggle{
  opacity: 0;
  position: absolute;
  top: -1000;
  left: -1000;
  z-index: 2;
  padding:0;
  margin: 0;
  width: 100%;
  height: 100%;
}

input[type="checkbox"].toggle + label{
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

input[type="checkbox"].toggle + label::before{
  content: '';
  width: 2em;
  height: 1em;
  background-color: #ffe9e9;
  border-radius: 1em;
  margin-right: .25em;
  transition: background-color 200ms  ease-in-out;
}

input[type="checkbox"].toggle + label::after{
  display: flex;
  justify-content: center;
  align-items: center;
  content: '\2715';
  font-size: .5em;
  left: .2em;
  width: 1.8em;
  height: 1.8em;
  background-color: #ff4a4a;
  border-radius: 1em;
  position: absolute;
  color: #FFF;
  transition: background-color 200ms  ease-in-out, transform 200ms ease-in-out;
}

input[type="checkbox"].toggle:checked + label {
  color: red;
}

input[type="checkbox"].toggle:checked + label::before{
  background-color: #d4ffe7;
}


input[type="checkbox"].toggle:checked + label::after{
  content: '\2713';
  transform: translateX(100%);
  background-color: #49e712;
}

input[type="checkbox"].toggle:disabled + label::before{
  background-color: #eee;
}

input[type="checkbox"].toggle:disabled + label::after{
  background-color: #e3e3e3;
}